<template>
  <div class="answerDetail">
    <div class="single_question">
      <div class="question_title">
        <span>一、单选题</span>
        <span>(共 {{ singleChoiceDetail.length }} 题，每小题
          {{ singleChoiceValue }} 分，共
          {{ singleChoiceDetail.length * singleChoiceValue }}分)</span>
      </div>
      <div
        class="question_content"
        v-for="(item,index) in singleChoiceDetail"
        :key="index"
      >
        <div class="question_t">
          <span>{{index + 1 + '、'+ item.topic }}</span>
          <el-button
            plain
            class="analysisBtn"
            @click="viewParsing(item)"
          >查看解析</el-button>
        </div>
        <!-- <div class="question_img">
          {{ item }}
        </div> -->
        <div class="question_stem">
          <div
            class="option"
            :class="{
              errorOption:((item.selected != item.rightAnswers) && (item.selected == 'A')),
              rightOption:item.rightAnswers === 'A',
              notDone:item.selected == ''
              }"
          >
            <div>
              <span>A、</span>
              <span>{{ item.optionA }}</span>
            </div>
            <div>
              <span
                v-if="item.rightAnswers == 'A'"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="!item.result && item.selected == 'A'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:((item.selected == 'B') && (item.rightAnswers != 'B')),
              rightOption:item.rightAnswers == 'B',
              notDone:item.selected == ''}"
          >
            <div>
              <span>B、</span>
              <span>{{ item.optionB }}</span>
            </div>
            <div>
              <span v-if="item.rightAnswers == 'B'">正确答案</span>
              <span
                v-if="!item.result && item.selected == 'B'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{errorOption:((item.selected != item.rightAnswers) && (item.selected == 'C')),
              rightOption:item.rightAnswers == 'C',
              notDone:item.selected == ''}"
          >
            <div>
              <span>C、</span>
              <span>{{ item.optionC }}</span>
            </div>
            <div>
              <span v-if="item.rightAnswers == 'C'">正确答案</span>
              <span
                v-if="!item.result && item.selected == 'C'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:((item.selected != item.rightAnswers) && (item.selected == 'D')),
              rightOption:item.rightAnswers == 'D',
              notDone:item.selected == ''}"
          >
            <div>
              <span>D、</span>
              <span>{{ item.optionD }}</span>

            </div>
            <div>
              <span v-if="item.rightAnswers == 'D'">正确答案</span>
              <span
                v-if="!item.result && item.selected == 'D'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="multiple_question">
      <div class="question_title">
        <span>二、多选题</span>
        <span>(共 {{ multipleChoiceDetail.length }} 题，每小题
          {{ multipleChoiceValue }} 分，共
          {{ multipleChoiceDetail.length * multipleChoiceValue}}分)</span>
      </div>

      <div
        class="question_content"
        v-for="(item,index) in multipleChoiceDetail"
        :key="index"
      >
        <div class="question_t">
          <span>{{index + 1 + '、'+ item.topic }}</span>
          <el-button
            plain
            class="analysisBtn"
            @click="viewParsing(item)"
          >查看解析</el-button>
        </div>

        <div class="question_stem">
          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('A') && (!item.rightAnswers.includes('A'))),
              rightOption: (item.rightAnswers.includes('A') && item.selected.includes('A')),
              elseOption:(item.rightAnswers.includes('A') && !item.selected.includes('A')),
            }"
          >
            <!-- :class="judgeQuestionRight(item,'A')" -->

            <div>
              <span>A、</span>
              <span>{{ item.optionA }}</span>
            </div>
            <div class="rightOrError">
              <span
                v-if="(item.rightAnswers.includes('A'))"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('A') && (!item.rightAnswers.includes('A')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('B') && (!item.rightAnswers.includes('B'))),
              rightOption: (item.rightAnswers.includes('B') && item.selected.includes('B')),
              elseOption:(item.rightAnswers.includes('B') && !item.selected.includes('B')),
              notDone:item.status == 2}"
          >
            <div>
              <span>B、</span>
              <span>{{ item.optionB }}</span>
            </div>
            <div>
              <span
                v-if="(item.rightAnswers.includes('B'))"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('B') && (!item.rightAnswers.includes('B')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('C') && (!item.rightAnswers.includes('C'))),
              rightOption: (item.rightAnswers.includes('C') && item.selected.includes('C')),
              elseOption:(item.rightAnswers.includes('C') && !item.selected.includes('C')),
              notDone:item.status == 2
              }"
          >
            <div>
              <span>C、</span>
              <span>{{ item.optionC }}</span>
            </div>
            <div>
              <span
                v-if="(item.rightAnswers.includes('C') )"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('C') && (!item.rightAnswers.includes('C')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('D') && (!item.rightAnswers.includes('D'))),
              rightOption: (item.rightAnswers.includes('D') && item.selected.includes('D')),
              elseOption:(item.rightAnswers.includes('D') && !item.selected.includes('D')),
              notDone:item.status == 2}"
          >
            <div>
              <span>D、</span>
              <span>{{ item.optionD }}</span>
            </div>
            <div>
              <span
                v-if="item.rightAnswers.includes('D')"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('D') && (item.status ===0) && (item.rightAnswers.includes('D')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('E') && (!item.rightAnswers.includes('E'))),
              rightOption: (item.rightAnswers.includes('E') && item.selected.includes('E')),
              elseOption:(item.rightAnswers.includes('E') && !item.selected.includes('E')),
              notDone:item.status == 2}"
            v-if="(item.optionE != '') && ('optionE' in item)"
          >
            <div>
              <span>E、</span>
              <span>{{ item.optionE }}</span>
            </div>
            <div>
              <span
                v-if="item.rightAnswers.includes('E')"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('E') && (item.rightAnswers.includes('E')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>

          <div
            class="option"
            :class="{
              errorOption:(item.selected.includes('F') && (!item.rightAnswers.includes('F')) && item.status == 0),
              rightOption: (item.rightAnswers.includes('F') && item.selected.includes('F') && item.status == 1),
              elseOption:(item.rightAnswers.includes('F') && !item.selected.includes('F')),
              notDone:item.status == 2}"
            v-if="(item.optionF != '') && ('optionF' in item)"
          >
            <div>
              <span>F、</span>
              <span>{{ item.optionF }}</span>
            </div>
            <div>
              <span
                v-if="item.rightAnswers.includes('F')"
                class="selectRight"
              >正确答案</span>
              <span
                v-if="(item.selected.includes('F') && (item.rightAnswers.includes('F')))"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="judge_question">
      <div class="question_title">
        <span>三、判断题</span>
        <span>(共 {{ judgeChoiceDetail.length }} 题，每小题 {{ judgeChoiceValue }}
          分，共 {{ judgeChoiceDetail.length * judgeChoiceValue }}分)</span>
      </div>

      <div
        class="question_content"
        v-for="(item,index) in judgeChoiceDetail"
        :key="index"
      >
        <div class="question_t">
          <span>{{index + 1 + '、'+ item.topic }}</span>
          <el-button
            plain
            class="analysisBtn"
            @click="viewParsing(item)"
          >查看解析</el-button>
        </div>
        <div class="question_stem">
          <div
            class="option"
            :class="{
              errorOption:((item.selected != item.rightAnswers) && (item.selected == 'A')),
              rightOption:item.rightAnswers === 'A',
              notDone:item.selected == ''
            }"
          >
            <div>
              <span>A、</span>
              <span>{{ item.optionA }}</span>
            </div>
            <div>
              <span v-if="item.rightAnswers == 'A'">正确答案</span>
              <span
                v-if="!item.result && item.selected == 'A'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
          <div
            class="option"
            :class="{
              errorOption:((item.selected != item.rightAnswers) && (item.selected == 'B')),
              rightOption:item.rightAnswers === 'B',
              notDone:item.selected == ''
              }"
          >
            <div>
              <span>B、</span>
              <span>{{ item.optionB }}</span>
            </div>
            <div>
              <span v-if="item.rightAnswers == 'B'">正确答案</span>
              <span
                v-if="!item.result && item.selected == 'B'"
                class="selectError"
              >选择错误</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fill_question">
      <div class="question_title">
        <span>四、填空题</span>
        <span>(共 {{ fillChoiceDetail.length }} 题，每小题 {{ fillChoiceValue }}
          分，共 {{ fillChoiceDetail.length * fillChoiceValue}}分)</span>
      </div>
      <div
        class="question_content"
        v-for="(item,index) in fillChoiceDetail"
        :key="index"
      >
        <div class="question_t">
          <span>{{index + 1 + '、'+ item.topic }}</span>
          <el-button
            plain
            class="analysisBtn"
            @click="viewParsing(item)"
          >查看解析</el-button>
        </div>
        <div class="question_stem">
          <div class="option">
            <div>
              {{ item.rightAnswers }}
            </div>

          </div>

        </div>
        <div style="margin-top: 24px;margin-left: 40px;">
          <span style="font-size: 18px;color: #F99D38;">得分：{{ item.giveMarks }}分
          </span>
        </div>
      </div>

    </div>

    <div class="discuss_question">
      <div class="question_title">
        <span>五、论述题</span>
        <span>(共 {{ discussChoiceDetail.length }} 题，每小题 {{ discussChoiceValue }}
          分，共{{ discussChoiceDetail.length * discussChoiceValue}}分)</span>
      </div>
      <div
        class="question_content"
        v-for="(item,index) in discussChoiceDetail"
        :key="index"
      >
        <div class="question_t">
          <span>{{index + 1 + '、'+ item.topic }}</span>
          <el-button
            plain
            class="analysisBtn"
            @click="viewParsing(item)"
          >查看解析</el-button>
        </div>
        <div class="question_stem">
          <div
            class="option"
            style="height: 150px;"
          >
            <div>
              {{ item.rightAnswers }}
            </div>
          </div>
        </div>
        <div style="margin-top: 24px;margin-left: 40px;">
          <span style="font-size: 18px;color: #F99D38;">得分：{{ item.giveMarks }}分
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
// 引入获取个人成绩详情信息
import { getPersonScoreDetail } from '@/api/assessment/exammanage.js'

// 引入获取试卷详情的接口
import { getTestPaperDetail } from '@/api/assessment/testpapermanage.js'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  scoreId: {
    type: String,
    default: 0
  },
  paperId: {
    type: String,
    default: 0
  }
})

const singleChoiceDetail = ref([])
const singleChoiceAssessment = ref(0)

const multipleChoiceDetail = ref([])
const multipleChoiceAssessment = ref(0)

const judgeChoiceDetail = ref([])
const judgeChoiceAssessment = ref(0)

const fillChoiceDetail = ref([])
const fillChoiceAssessment = ref(0)

const discussChoiceDetail = ref([])
const discussChoiceAssessment = ref(0)

// 获取个人成绩详情
async function getPersonScore () {
  const res = await getPersonScoreDetail(props.scoreId)
  // console.log()
  // console.log(res)
  singleChoiceDetail.value = JSON.parse(res.data.singleChoiceDetail)
  multipleChoiceDetail.value = JSON.parse(res.data.multipleChoiceDetail).map(item => {
    return {
      ...item,
      rightAnswers: item.rightAnswersMore.split(','),
    }
  })
  judgeChoiceDetail.value = JSON.parse(res.data.judgeChoiceDetail)
  fillChoiceDetail.value = JSON.parse(res.data.fillChoiceDetail)
  discussChoiceDetail.value = JSON.parse(res.data.discussChoiceDetail)
  singleChoiceAssessment.value = res.data.singleChoiceAssessment
  multipleChoiceAssessment.value = res.data.multipleChoiceAssessment
  judgeChoiceAssessment.value = res.data.judgeChoiceAssessment
  fillChoiceAssessment.value = res.data.fillChoiceAssessment
  discussChoiceAssessment.value = res.data.discussChoiceAssessment
  console.log(singleChoiceDetail.value)
  console.log(multipleChoiceDetail.value)
  console.log(judgeChoiceDetail.value)
  console.log(fillChoiceDetail.value)
  console.log(discussChoiceDetail.value)
}
getPersonScore()

const singleChoiceValue = ref(0)
const discussChoiceValue = ref(0)
const multipleChoiceValue = ref(0)
const judgeChoiceValue = ref(0)
const fillChoiceValue = ref(0)
// 获取试卷详情
async function getTestPaper () {
  const res = await getTestPaperDetail(Number(props.paperId))
  // console.log(res)
  singleChoiceValue.value = res.data.singleChoiceValue
  discussChoiceValue.value = res.data.discussChoiceValue
  multipleChoiceValue.value = res.data.multipleChoiceValue
  judgeChoiceValue.value = res.data.judgeChoiceValue
  fillChoiceValue.value = res.data.fillChoiceValue
}
getTestPaper()

// 查看解析
function viewParsing (item, i) {
  let analysis = item.analysis ? item.analysis : "暂无解析"
  ElMessageBox.alert(analysis, '答案解析', {
    buttonSize: 'small',
    center: true,
    confirmButtonText: '知道了',
    confirmButtonClass: 'elmsgConfirmBtn',
    customClass: 'elmsgBox',
  })
}
</script>

<style lang='scss' scoped>
.answerDetail {
  min-height: 1000px;
  padding: 0 86px 100px 86px;
  background-color: #ffffff;
  // margin-left: 200px;
  .question_title {
    display: flex;
    align-items: center;
    margin-top: 48px;
    padding-left: 30px;
    width: 1200px;
    height: 72px;
    background-color: #e9f6f3;
    // border: 1px dashed #bdc0bf;
    span:nth-child(1) {
      font-size: 22px;
      color: #363636;
      font-weight: bold;
    }
    span:nth-child(2) {
      font-size: 18px;
      color: #696969;
      margin-left: 8px;
    }
  }

  .question_content {
    padding: 24px 0 40px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .question_t {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      .analysisBtn {
        width: 120px;
        height: 32px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid rgba(32, 159, 133, 1);

        color: #363636;
        &:hover {
          background-color: transparent;
          // color: #fff !important;
        }
        &:focus {
          background-color: transparent;
          // color: #fff !important;
        }
      }
    }
    span {
      font-size: 18px;
      color: #363636;
      margin-left: 15px;
    }
    .question_stem {
      padding: 0px 0 0 40px;

      .option {
        display: flex;
        justify-content: space-between;
        width: 1160px;
        height: 48px;
        margin-top: 23px;
        padding-left: 32px;
        padding-right: 32px;
        line-height: 48px;
        border-radius: 14px 14px 14px 14px;
        border: 1px solid #209f85;
        span {
          font-size: 16px;
          color: #696969;
        }
      }

      .rightOption {
        background-color: #209f85;
        border: 1px solid #209f85;
        span {
          color: #fff !important;
        }
      }

      .errorOption {
        background-color: rgba(234, 96, 112, 0.3);

        border: 1px solid rgba(234, 96, 112, 0.3);
        .selectError {
          color: #ea6070 !important;
        }
        .selectRight {
          color: #fff !important;
        }
      }
      .notDone {
        //background-color: transparent;
        // border: none;
      }
      .elseOption {
        background-color: #f99d38;
        border: 1px solid #f99d38;
        .selectRight {
          color: #fff !important;
        }
      }
    }
  }
}
</style>
